<template>
  <div class="login-page">
    <div class="login-wrap">
      <login-left-img class="img-wrap"/>
      <router-view/>
    </div>
  </div>
</template>

<script>
import LoginLeftImg from './components/LoginLeftImg'
import LoginPart from './components/LoginPart'

export default {
  name: 'LoginView',
  components: {
    LoginLeftImg,
    LoginPart
  },
  data () {
    return {
      rememberPassword: true,
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在2到15个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在8到20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    login () {
      this.$message.success('登录成功')
    },
    registerUser () {
      this.$message.success('注册')
    },
    forgetPassword () {
      this.$message.success('忘记密码')
    },
    loginByQQ () {
      this.$message.success('QQ登录')
    },
    loginByWeChat () {
      this.$message.success('微信登录')
    }
  }
}
</script>

<style scoped>
.login-page {
  background: linear-gradient(45deg, #211136, #bf5853);
  height: 100vh;
}

.login-wrap {
  width: 980px;
  min-height: 500px;
  border-radius: 10px;
  font-family: "neo";
  overflow: hidden;
  box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 50%;
  right: 50%;
  margin-top: -250px;
  margin-right: -490px;
}

/* 自适应布局 */
@media screen and (max-width: 1000px ) {
  .img-wrap {
    display: none;
  }

  .login-wrap {
    width: 490px;
    margin-right: -245px;
  }

  .login, .register {
    width: 100%;
  }
}
</style>
